// @flow
import * as React from 'react';
import '../static/css/right-slider.css';
import { Menu, Dropdown, Icon } from 'antd';
import { inject, observer } from 'mobx-react';
import eventProxy from '../events/eventProxy'
import avatar from '../static/images/avatar.png'
import {Button} from 'antd'

@inject('coins')
@observer
export default class RightSlider extends React.Component<Props> {

  constructor(props) {
    super(props)

    let coinsMiner = this.props.coins.currentCoinsMiner
    let isStable = this.props.coins.currentIsStable
    let version = this.props.coins.currentVersion
    let copyright = this.props.coins.currentCopyright

    // 右侧边栏宽度
    const sliderWidth = '250px'

    this.state = {
      coinsMiner: coinsMiner,
      isStable: isStable,
      version: version,
      copyright: copyright,

      sliderWidth: sliderWidth,
      sliderRight: '-' + sliderWidth
    }
  }

  componentDidMount() {
    eventProxy.on('showSlider', (msg) => {
      // console.log(msg)
      let right;
      if (this.state.sliderRight != '0px') {
        right = '0px'
      } else {
        right = '-' + this.state.sliderWidth
      }
      this.setState({
        sliderRight: right
      }, () => {
        var self = this;
        var lock = true;
        setTimeout(() => {
          window.addEventListener("click", function (e) {
            e.preventDefault();
            // console.log(e.target.className)
            var str = e.target.className.search('slider')
            if (str != -1 || e.target.className == '') {
              // console.log('1')
            } else if (str == -1 && lock) {
              self.setState({
                sliderRight: '-' + self.state.sliderWidth
              })
              lock = false
              // console.log('2')
            }
          }, false);
        }, 200);
      })
    })
  }

  render() {

    return (
      <div
        className="right-slider"
        style={{ right: this.state.sliderRight, width: this.state.sliderWidth }}>
        <div className="right-slider-frame">
          <div className="avatar">
            <img src={avatar} alt="" />
          </div>
          <div className="slider-user-info">
            <div>
              admin
            </div>
            <div>
              管理员
            </div>
            <div className="slider-operation">
              <div>
                <div>
                  <span>钱包地址 : </span>
                  <Button className="slider-btn" size='small' type="primary">Forward<Icon type="right" /></Button>
                </div>
              </div>
              <div>
                <div></div>
              </div>
            </div>
          </div>
          <div className="slider-footer" style={{ width: this.state.sliderWidth }}>
            {this.state.copyright}
          </div>
        </div>
      </div>
    );
  }
}